<template>
   <div class="witness-page">
      <breadcrumb :bread-path-list="breadPathList" last-bread-title="工作人员查询" :show-back-btn-flag="true">
         <div style="display: flex; flex: 1">
            <!-- <span style="margin-left: auto;color: #fff;">
               <i class="el-icon-refresh-left el-icon--left" @click="returenHandle">返回</i>
            </span> -->
         </div>
      </breadcrumb>
      <div class="witness-body">
         <div class="layout-header content-header">
            <el-row :gutter="20" style="height: 90%;">
               <el-col style="background-color: #374A64;height: 100%;overflow: hidden;" :span="2">
                  <el-scrollbar style="height: 97%;">
                     <div class="left-menu">
                        <div class="title">
                           <!-- 一个圆点 -->
                           <div class="circle"></div>
                           工作人员
                        </div>
                        <div style="width: 100%;">
                           <div class="container" v-for="(item,index) in list_people.GZRY.children" :key="index">
                              <img v-if="item.facePic" :src="item.facePic" alt="" class="images">
                              <img  v-else :src="require('@/views/witness/components/Object3D/canvas/默认头像.png')" alt="" class="images">
                              <div class="bottom">
                                 <span>{{ item.personName }}</span>
                                 <el-checkbox v-model="item.checked" @change="handleSelectItem"></el-checkbox>
                              </div>
                           </div>
                        </div>

                     </div>
                  </el-scrollbar>
               </el-col>
               <el-col style="background-color: #2C384D;height: 100%;" :span="22">
                  <el-form ref="formSearch" :model="formSearch" :inline="true" class="form-search" size="normal">
                     <el-form-item label="选择楼层" prop="date" class="itemColor">
                        <el-select @change="tracklistPersonByTrack" v-model="formSearch.floorName" option-max-width="180px" placeholder="请选择" >
                           <el-option label="十楼" value="十楼"></el-option>
                           <el-option label="十二楼" value="十二楼"></el-option>
                        </el-select>
                     </el-form-item>
                     <el-form-item label="选择时间" prop="date" class="itemColor">
                        <el-date-picker v-model="formSearch.date" :clearable="true" type="daterange" @change="tracklistPersonByTrack" align="right"
                           style="width: 240px" unlink-panels value-format="yyyy-MM-dd" range-separator="至"
                           start-placeholder="开始日期" end-placeholder="结束日期" />
                     </el-form-item>
                  </el-form>
                  <div style="background-color: #1F2A3B;margin-bottom: 10px; height: 20%;display: flex; justify-content: space-between; align-items: center;">
                     <el-scrollbar >
                      <el-steps  :active="active" class="my-steps">
                        <template  v-for="(item,index) in list_step" >
                          <el-step :key="index"   :icon="item.type === 1 ? 'iconfont icon-bluedian' :  'iconfont icon-jingbaodeng'" :title="item.title" >
                            <!-- <i  class="icon-yujing" slot=icon ></i> -->
                            <template #title>
                                <p @click="fnGetAllAlarmId(item)">{{ item.title }}</p>
                            </template>
                            <template #description>
                              <p v-if="item.title!=='查看'">{{item.time }}</p>
                              <div v-if=" item.show" class="box_description">
                                <div class="close"> <i @click="item.show = false" class="el-icon-close"></i></div>
                                <p>识别到：{{ item.content.alarmTime }}</p>
                                <p>行为：{{ item.content.alarmContent }}</p>
                              </div>
                            </template>
                          </el-step>
                        </template>
                    </el-steps>
                 </el-scrollbar>
                  </div>
                  <div style="background-color: #1F2A3B; height: 68%;">
                     <proViewComponent :progress="progress" gzrylerg  ref="proView" />
                  </div>
               </el-col>
            </el-row>
         </div>


      </div>
      <!-- <DialogDetail :visible.sync="dialogDetail" /> -->
   </div>
</template>
<script>
//  import D3Tree from "./components/proViewComponent.vue";
//  import ListCard from "./components/listCard.vue";
//  import DialogDetail from "./components/dialog_detail.vue";
import leftItem from './components/leftItem.vue';
import setpsComponent from './components/setpsComponent.vue';
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import { tracklistPersonByTrack,trackListTrack,trackGetAlarm } from "@/api/pageStats";
import setpsComponentVue from './components/setpsComponent.vue';
import dayjs from 'dayjs';
export default {
   components: {
      leftItem,
      proViewComponent,
      setpsComponent
      //   ListCard,
      //   DialogDetail,
      //   D3Tree
   },
   data() {
      return {
         progress:false,
         D3data: {},
         trajectoryStatus: true, // 实时还是历史
         breadPathList:[
               {
               title:'统计查询',
               path:'/wintessquery/viewXm'
            },
         ],
         formSearch: {
            date: [],
            floorName:'十楼',
         },
         form: {

         },
         list_step: [],
         active:null,
         list_people:{
            GZRY:{
               children:[]
            }
         }

      };
   },
   mounted() {

      const start = dayjs().format('YYYY-MM-DD')
      // const start = '2024-09-01'
      const end = dayjs().format('YYYY-MM-DD')
      this.formSearch.date = [start,end]
      this.tracklistPersonByTrack()

   },
   methods: {
      // 生成步骤条 - 单人 - 多人
      fnChangeSteps(alarmIdList=[],cardBindTime='',cardUnBindTime=''){
      // 假数据
        const list_step = []
        const times = [ cardBindTime, cardUnBindTime]
        const texts = ['进入评标区','离开评标区']
        const convertToTimestamp= ( date)=>{
          return  new Date(date).getTime()
        }
      // 2预警 1普通
      times.forEach((e,i) => {
        if(!e) return
        let obj = {
          type:1,
          title:texts[i],
          time:times[i],
          show:false
        }
        list_step.push(obj)
      });
      const arr1 = []
      alarmIdList.forEach(x=>{
        const { timestamp,dateTime,alarmId } = x
        let obj = {
            type:2,
            title:'查看',
            time:dateTime,
            alarmId,
            show:false,
            content:null
          }
        if(timestamp > convertToTimestamp(cardBindTime) && timestamp < convertToTimestamp(cardUnBindTime)){
         arr1.push(obj)
        }

      })
      if(alarmIdList.length === 0){
        this.list_step = [list_step[0],list_step[1]]
        this.progress = false
        return
      }
      if(list_step.length === 2){
        this.list_step  = [list_step[0],...arr1,list_step[1]]
      }
      this.active = this.list_step.length
      },
      // 选中某mourn
      handleSelectItem(){
         const convertToTimestamp= ( date)=>{
          return  new Date(date).getTime()
         }
         const list = []
         for(const [k,v] of Object.entries(this.list_people)){
         if(v.children.length <=0){
            break;
         }
         for(const [k2,v2] of Object.entries(v.children)){
            if(v2.checked){
               list.push(v2)
            }
         }
         }
         //  模拟数据
         const alarmIdList = [
         {
            "floorName": "十二楼",
            "pos": [54.892, 19.558, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-07 22:59:19",
            "timestamp": convertToTimestamp('2024-12-07 22:59:19'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe26f980062"
         },
         {
            "floorName": "十二楼",
            "pos": [54.892, 19.558, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-07 23:48:18",
            "timestamp": convertToTimestamp('2024-12-07 23:48:18'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe29e5e0075"
         },
         {
            "floorName": "十二楼",
            "pos": [58.033268, 22.66371, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 03:48:18",
            "timestamp": convertToTimestamp('2024-12-08 03:48:18'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe285bd0071"
         },
         {
            "floorName": "十二楼",
            "pos": [36.3559, 4.06252, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 22:48:56",
            "timestamp": convertToTimestamp('2024-12-08 22:48:56'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe31b270118"
         },
         {
            "floorName": "十二楼",
            "pos": [28.442162, 4.115754, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-08 23:49:07",
            "timestamp": convertToTimestamp('2024-12-08 23:49:07'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe344320145"
         },
         {
            "floorName": "十二楼",
            "pos": [28.430296, 13.751032, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-09 23:49:11",
            "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe353cb014e"
         },
         {
            "floorName": "十二楼",
            "pos": [20.273283, 4.067175, 0],
            "speed": [0, 0, 0],
            "dateTime": "2024-12-09 23:49:18",
            "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
            "stc": 0,
            "type": 1,
            "alarmId": "4028fcf393abe04d0193abe372ca0177"
         },
         ]
         // 模拟数据
         // this.query.pbEndTime = '2024-12-09 02:59:19'
         // this.query.pbStartTime = '2024-12-08 00:59:19'
         if(list.length === 1){
         let {cardBindTime,cardUnBindTime,trackList} =  list[0]
         // const alarmIdList = trackList.filter(x=>x.type === 1)
         // 模拟数据
            cardBindTime = '2024-10-01 21:59:19'
            cardUnBindTime = '2024-12-10 21:59:19'
         // 单人步骤条
         this.fnChangeSteps(alarmIdList,cardBindTime,cardUnBindTime)
            // this.fnChangeSteps(alarmIdList,,cardUnBindTime)
         }
         if(list.length === 0){
            this.list_step = []
            this.progress = false
            return
         }
         if(list.length > 1){
         list.forEach(i=>{
            if(i.trackList.length <=0)return
            i.trackList.forEach(x=>{
               if(x.type === 1){
               x = {...x,'personId':i.personId}  // 示例把personId添加到alarmIdList
               alarmIdList.push(x)
               }
            })
         })

         // 多人步骤条
         this.fnChangeSteps(alarmIdList)
         }
         //生成轨迹数据
         const colors  = list.map(x=> x.color)
         this.$refs['proView'].handleLineAll(list,colors)
         this.progress = true








      },
      // 获取步骤条轨迹
      async getTrackListTrack(personIds){
            const params = {
               projectId:'',
               bidId:'',
               personIds,
               floorName:this.formSearch.floorName
         }
               
         return await trackListTrack(params)

      },
      // 获取人员列表
      async tracklistPersonByTrack(){
         this.list_step = []
         this.progress = false
         const peopleList = {
            'GZRY':{
               color:'#68F60C',
               name:'工作人员',
               label:'工作人员',
               children:[]
            },
         }
         const stringToColor = (str) => {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
               hash = str.charCodeAt(i) + ((hash << 5) - hash);
            }
            const color = `#${((hash >> 0) & 0xFFFFFF).toString(16).padStart(6, '0')}`;
            return color;
         }
         const { floorName,date } = this.formSearch
         const p = {
            "floorName":floorName,// projectId:this.query.projectId,
            // bidId:this.query.bidId,,
            "personIds": [],
            "start": "",
            "end": ""
         }
         if (date && date.length) {
            p.start = `${date[0]} 00:00:00`; // 起始时间
            p.end = `${date[1]} 23:59:59`; //
          }
         const r = await tracklistPersonByTrack(p)
         console.log('r.data',r.data)
         if(r.code !== 0 ||  r.data.length <=0) return
         const personIds = r.data.map(x=>x.personId)
         const guiji = await this.getTrackListTrack(personIds)
         if(guiji.code  !== 0 ) return
         r.data.forEach((i)=>{
            if(peopleList[i.personType]){
               i.checked = false
               i.color = stringToColor(i.personName)
               peopleList[i.personType].children.push(i)
            }
            const data = guiji.data.find(x=> x.personId === i.personId)
               if(data){
                  i.trackList = data.trackList
               }
               personIds.push(i.personId)
         })
         this.list_people = peopleList
         console.log('peopleList',peopleList);

      },
      async fnGetAllAlarmId(item){
         const r = await trackGetAlarm(item.alarmId)
         if (r.code === 0 ){
            this.$set(item,'content',r.data)
         }
         item.show = true
      },
   }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;

.witness-page {
   background-color: #1d2637;
   box-sizing: border-box;
   position: fixed;
   top: 50px;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999;

}

.witness-body {
   // margin: 6px;
   // padding: 10px;
   box-sizing: border-box;
   background-color: #2d394e;
   color: #fff;
}

.layout-header.content-header {
   background-color: #1A2634;
   padding: 0 10px;
   min-height: 100%;

}

.layout-body {
   position: relative;
   margin-top: 10px;
   display: flex;
   align-items: center;
   background-color: #3a475e;
   flex-flow: column nowrap;
   padding: 10px;
   box-sizing: border-box;

   .title1_content {
      width: 100%;
      height: 60px;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      align-items: center;
      background-color: #2a3545;
      justify-content: flex-start;
   }

   .box_3d {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      // flex: 1;
      background-color: #273243;
   }
}

.layout-footer {
   height: 170px;
   display: flex;
   padding: 0 10px;
   background-color: hsl(218, 24%, 30%);
   text-align: left;
}

.boxAllfooter {
   //padding: 4px 10px;
   display: flex;
   flex-flow: nowrap row;
}

.boxAllitem {
   position: relative;
   width: 250px;
   box-sizing: border-box;
   background-color: #2b3a51;
   margin-right: 8px;
   color: #fff;
   padding: 10px;

   // border: 1px solid $backCard;
   .boxAllitem_img {
      width: 34px;
      height: 24px;
      position: absolute;
      right: 0;
      top: 0;

      //background-color: #00c6ff;
      img {
         width: 100%;
         height: auto;
      }
   }

   li {
      line-height: 26px;
   }
}

.lastBox {
   // margin-right: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   // box-sizing: border-box;
   // padding: 10px 0px;
   width: 80px;
   margin-bottom: 18px;
   // border-left: 20px solid $backBG;
   background-color: #2b3a51;
}

.el-icon-sort {
   transform: rotateZ(90deg);
}


.el-collapse {
   background-color: #2A394D;
   box-shadow: none !important;

   ::v-deep box {
      box-shadow: none !important;
      /* 去除阴影 */
      outline: none !important;
      /* 去除可能的轮廓线 */
   }

   ::v-deep .el-collapse-item {
      // background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;
   }

   ::v-deep .el-collapse-item__header {
      border: none;
      box-shadow: none !important;

      ::v-deep is-active {
         background-color: red !important;
      }
   }
}


.el-collapse-item {
   width: 100%;
   border: none;
   box-shadow: none !important;

   ::v-deep .el-collapse-item__header {
      background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;

      ::v-deep is-active {
         background-color: red !important;
      }
   }



   ::v-deep .el-collapse-item__wrap {
      background-color: #2A394D !important;
      color: white;
      border: none;
      box-shadow: none !important;
   }
}

.el-input-group--append {
   border: none;

   ::v-deep .el-input__inner {
      background-color: #2B3A50 !important;
      color: white !important;
   }

}

.el-select {
   ::v-deep .el-input__inner {
      background-color: #2B3A50 !important;
      color: #fff;
      border: none;
   }
}

.el-date-editor {

   ::v-deep .el-range-input {
      background-color: #2B3A50 !important;
      color: white;
      border: none;

   }
}

.el-range-editor.el-input__inner {
   background-color: #2B3A50 !important;
   border: none !important;

}



.el-step {
   ::v-deep .el-step__text-inner {
      display: none;
   }

}

.el-step .el-step__icon.is-text {
   background-color: #00c6ff;
}


.itemColor {

   ::v-deep .el-form-item__label {
      color: white !important;
      border: none !important;
   }
}

.form-search {
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   background: #364960;
   margin-bottom: 10px;
   justify-content: flex-end;
   display: flex;
   height: 5%;
   color: #fff;
}

.left-menu {
   background-color: #1E2B3B;
   margin-top: 10px;
   // 盒内元素水平居中
   justify-content: center;

}


.left-menu .title {
   color: #fff;
   font-size: 18px;
   padding-left: 10px;
   padding-top: 10px;

   // 盒内元素水平布局
   display: flex;

   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
}

.circle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #00c6ff;
   margin-right: 5px;
   float: left;


}

.container {
   position: relative;
   width: 90%;
   margin: 0 auto;
   justify-content: center;
   margin-bottom: 5px;
}

.container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 15%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   background: linear-gradient(to bottom, transparent, rgb(26, 26, 26));
   color: white;

}

.box_description{
  position: absolute;
  top: -50px;
  background: #1890FF;
  border: 1px solid rgba(24,144,255,0.36);
  color: #fff;
  width: 100%;
  text-align: left;
  padding: 8px;
  height: 30px;
  border-radius: 4px;
  .close{
    position: absolute;
    top: 0;
    right: 4px;
  }
}

.Breadcrumb {
   background-color: #364860;
   margin-bottom: 10px;
   border-top: 1px solid #667a95;
   ::v-deep .el-breadcrumb__inner {
      color: #fff;
      &:hover{
         color: #409EFF; /* 改变颜色 */
         cursor: pointer; /* 将鼠标指针改为指针样式 */
         text-decoration: underline; /* 添加下划线 */
      }
   }
}
::v-deep .my-steps{
        padding-top: 52px;
        min-height: 90px;
        // transform: scale(0.8);
        // margin-left: -220px;
        .el-step{
          width: 220px;
        }

      }
::v-deep .el-step .el-step__title{
   color: #fff;
}
::v-deep .el-steps--horizontal .el-step.is-step-finish .el-step__icon.is-icon{
   background-color: rgba(24, 144, 255, 0) !important;
   padding: 0;
}
::v-deep .el-steps--horizontal .el-step.is-step-process.is-active .el-step__icon.is-icon{
   background-color: rgba(24, 144, 255, 0) !important;
   padding: 0;
}
</style>
